<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <f:view>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Historia Clinica</title>
            <link type="text/css" href="../common/css/redmond/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
            <link type="text/css" href="../common/css/smart_wizard.css" rel="stylesheet" />            
            <link type="text/css" href="../common/css/administrar.css" rel="stylesheet" />
            <script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery.ui.all.js"></script>
            <script type="text/javascript" src="../common/js/jquery-ui-1.8.6.custom.min.js"></script>
            <script type="text/javascript" src="../common/js/calendarioui-es.js"></script>
            <script type="text/javascript" src="../common/js/jquery.dateentry.js"></script>
            <script type="text/javascript" src="../common/js/historiaclinica_gral.js"></script>
            <script type="text/javascript" src="../common/js/jquery.tablesorter.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery.metadata.js"></script>
            <script type="text/javascript" src="../common/js/jquery.tablesorter.pager.js"></script>
            <script type="text/javascript" src="../common/js/jquery.validate.js"></script>
            <script type="text/javascript" src="../common/js/jquery.zebra.js"></script>
            <script type="text/javascript" src="../common/js/ui.panel.js"></script>
            <script type="text/javascript" src="../common/js/jquery.qtip-1.0.0-rc3.js"></script>
            <style type="text/css" title="currentStyle">
                @import "../common/css/demo_page.css";			
                @import "../common/css/demo_table_jui.css";
            </style>

            <script type="text/javascript" language="javascript" src="../common/js/jquery.dataTables.js"></script>
            <script type="text/javascript" language="javascript" src="../common/js/jquery.smartWizard-2.0.min.js"></script>

            <script>
                var asInitVals = new Array();

                $(document).ready(function() {
                    
                    $('#wizard').smartWizard();
      
                    function onFinishCallback(){
                        $('#wizard').smartWizard('showMessage','Finish Clicked');
                    }     
                    
                    
                    var oTable = $('#example').dataTable( {
                        "sPaginationType": "full_numbers",
                        "bJQueryUI": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "sAjaxSource": "/salus/PacienteListaServlet",
                        "oLanguage": {
                            "sLengthMenu": "Mostrar _MENU_ registros por Pagina",
                            "sZeroRecords": "Opps - No se encontraron datos",
                            "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                            "sInfoEmpty": "Mostrando 0 a 0 de 0 registros",
                            "sInfoFiltered": "(filtered from _MAX_ total records)"
                        }

                    } );

                    $("tfoot input").keyup( function () {
                        /* Filter on the column (the index) of this element */
                        oTable.fnFilter( this.value, $("tfoot input").index(this) );
                    } );

                    $("tfoot input").each( function (i) {
                        asInitVals[i] = this.value;
                    } );

                    $("tfoot input").focus( function () {
                        if ( this.className == "search_init" )
                        {
                            this.className = "";
                            this.value = "";
                        }
                    } );

                    $("tfoot input").blur( function (i) {
                        if ( this.value == "" )
                        {
                            this.className = "search_init";
                            this.value = asInitVals[$("tfoot input").index(this)];
                        }
                    } );                               
                    $("#example tbody").dblclick(function(event) {
                        $(oTable.fnSettings().aoData).each(function (){
                            $(this.nTr).removeClass('row_selected');
                        });
                        $(event.target.parentNode).addClass('row_selected');
                        var anSelected = fnGetSelected( oTable );                                        
                        var dato=anSelected[0].cells;                                        
                        planear(dato[0].innerHTML,dato[1].innerHTML)
                    });
                    /* Add a click handler for the delete row */
                    $('#delete').click( function() {
                        var anSelected = fnGetSelected( oTable );
                        //oTable.fnDeleteRow( anSelected[0] );
                        var dato=anSelected[0].cells;
                        alert(dato[0].innerHTML);
                    } );
                } );
                function fnGetSelected( oTableLocal )
                {
                    var aReturn = new Array();
                    var aTrs = oTableLocal.fnGetNodes();

                    for ( var i=0 ; i &lt; aTrs.length ; i++ )
                    {
                        if ( $(aTrs[i]).hasClass('row_selected') )
                        {
                            aReturn.push( aTrs[i] );
                        }
                    }
                    return aReturn;
                }

            </script>

        </head>
        <body>
            <div style="width: 100%">

                <h3 style="text-align: center" class="ui-widget-header">Planeaci&oacute;n PYP</h3>  

                <table width="100%">
                    <tr>
                        <td align="left">                                  
                        </td>
                        <td align="right">
                            <button id="ayudaBtn">Ayuda</button>               
                        </td>
                    </tr>
                </table>          
                <div class="tooltips"></div> 

                <!--DATA TABLE-->                
                <div id="dynamic">
                    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                        <thead>
                            <tr>
                                <th width="5%">Sec</th>
                                <th width="10%">Identificac&oacute;n</th>
                                <th width="20%">Primer Nombre</th>
                                <th width="20%">Segundo Nombre</th>
                                <th width="20%">Primer Apellido</th>
                                <th width="20%">Segundo Apellido</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="3" class="dataTables_empty">Loading data from server</td>
                            </tr>
                        </tbody>

                        <tfoot>
                            <tr>                                
                                <th><input size="20" type="hidden" name="search_id" value="Secuencial" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_numero" value="Numero" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_nombre1" value="Primer Nombre" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_nombre2" value="Segundo Nombre" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_apellido1" value="Primer Apellido" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_apellido2" value="Segundo Apellido" class="search_init" /></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>




                <!--
            <div id="adm_paciente">
                <h3 style="text-align: center" class="ui-widget-header">Planeaci&oacute;n PYP</h3>                
                <div style="width: 100%" id="buscador-form">
                    <table border="0">
                        <tr valign="top" class="ui-widget-header">
                            <td>Identificaci&oacute;n</td>
                            <td><input type="text" size="16" onkeyup="this.value=this.value.toUpperCase()" id="buscarCod" class="text ui-widget-content ui-corner-all"/></td>
                            <td>Nombre</td>
                            <td><input type="text" size="20" onkeyup="this.value=this.value.toUpperCase()" id="buscarDes" class="text ui-widget-content ui-corner-all"/></td>
                            <td>Apellido</td>
                            <td><input type="text" size="20" onkeyup="this.value=this.value.toUpperCase()" id="buscarDes1" class="text ui-widget-content ui-corner-all"/></td>
                            <td><button id="buscarBtn">Buscar</button></td>
                            <td><button id="clearBtn">Limpiar</button></td>
                        </tr>
                    </table>
                </div>


                <table width="100%" id="tabla-paciente" class="lista" >
                    <thead>
                        <tr>
                            <th>Identificaci&oacute;n</th>
                            <th>Nombre</th>
                            <th class="{sorter: false}">Opciones</th>
                        </tr>
                    </thead>
                    <tbody id="tabla-paciente-body">

                    </tbody>
                </table>
                <div id="pager" class="pager">
                    <form>
                        <table>
                            <tr class="ui-widget-header">
                                <td>
                                    <img src="../common/img/first1.png" class="first"/>
                                </td>
                                <td>
                                    <img src="../common/img/prev1.png" class="prev"/>
                                </td>
                                <td>
                                    <input type="text" size="8" class="pagedisplay text ui-widget-content ui-corner-all"/>
                                </td>
                                <td>
                                    <img src="../common/img/next1.png" class="next"/>
                                </td>
                                <td>
                                    <img src="../common/img/last1.png" class="last"/>
                                </td>
                                <td>
                                    <select class="pagesize text ui-widget-content">
                                        <option selected="selected"  value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option  value="40">40</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
                -->

            </div>


            <div id="paciente-form" title="Info" style="display: none">
                <!--<form id="formPaciente">-->
                <input type="hidden" id="op"/>


                <!--PROBANDO EL WIZARD-->
                <table align="center" border="0" cellpadding="0" cellspacing="0">
                    <tr><td> 
                            <!-- Smart Wizard -->
                            <div id="wizard" class="swMain">
                                <ul>
                                    <li><a href="#step-1">
                                            <label class="stepNumber">1</label>
                                            <span class="stepDesc">
                                                Step 1<br />
                                                <small>Step 1 description</small>
                                            </span>
                                        </a></li>
                                    <li><a href="#step-2">
                                            <label class="stepNumber">2</label>
                                            <span class="stepDesc">
                                                Step 2<br />
                                                <small>Step 2 description</small>
                                            </span>
                                        </a></li>
                                    <li><a href="#step-3">
                                            <label class="stepNumber">3</label>
                                            <span class="stepDesc">
                                                Step 3<br />
                                                <small>Step 3 description</small>
                                            </span>                   
                                        </a></li>
                                    <li><a href="#step-4">
                                            <label class="stepNumber">4</label>
                                            <span class="stepDesc">
                                                Step 4<br />
                                                <small>Step 4 description</small>
                                            </span>                   
                                        </a></li>
                                </ul>
                                <div id="step-1">	
                                    <h2 class="StepTitle">Step 1 Content</h2>

                                    <ul type="disk">
                                        <div id="panelPlanPaciente">
                                            <h3 align="center">Informaci&oacute;n General</h3>
                                            <table width="100%">
                                                <tr class="ui-widget-header">
                                                    <td>Id</td>
                                                    <td>C&oacute;digo</td>
                                                    <td colspan="2">Tipo Ide</td>

                                                </tr>

                                                <tr>                                
                                                    <td><input type="text" size="15" name="id" id="id" readonly ="true" class="ui-widget-content" /></td>
                                                    <td><input type="text" readonly ="true"  size="15" name="identificacion" id="identificacion" value="" class="ui-widget-content" /></td>
                                                    <td colspan="2"><select readonly ="true"  id="id_tipo_ide" name="id_tipo_ide" class="ui-widget-content"></select></td>

                                                </tr>
                                                <tr class="ui-widget-header">
                                                    <td>Primer Nombre</td>
                                                    <td>Segundo Nombre</td>
                                                    <td>Primer Apellido</td>
                                                    <td>Segundo Apellido</td>
                                                </tr>
                                                <tr>

                                                    <td>
                                                        <input type="text" readonly ="true"  size="15" name="nombre1" id="nombre1" value="" class="ui-widget-content" />
                                                    </td>                                
                                                    <td>
                                                        <input type="text" readonly ="true"  size="15" name="nombre2" id="nombre2" value="" class="ui-widget-content" />
                                                    </td>
                                                    <td>
                                                        <input type="text" readonly ="true"  size="15" name="apellido1" id="apellido1" value="" class="ui-widget-content" />
                                                    </td>

                                                    <td>
                                                        <input type="text" readonly ="true"  size="15" name="apellido2" id="apellido2" value="" class="ui-widget-content" />
                                                    </td>
                                                </tr>

                                                <tr class="ui-widget-header">
                                                    <td>Fecha Nacimiento</td>
                                                    <td>Sexo</td>
                                                    <td>Departamento</td>
                                                    <td>MUncipio</td>


                                                </tr>

                                                <tr>
                                                    <td>
                                                        <input type="text" readonly ="true"  id="fecha_nac" name="fecha_nac" class="ui-widget-content"/>
                                                    </td>

                                                    <td>
                                                        <select id="sexo" readonly ="true"  name="sexo" class="text ui-widget-content">
                                                            <option value="1">MASCULINO</option>
                                                            <option value="2">FEMENINO</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select id="id_depto" readonly ="true"  name="id_depto" class="ui-widget-content"></select>
                                                    </td>

                                                    <td>
                                                        <select id="id_mupio" readonly ="true"  name="id_mupio" class="ui-widget-content"></select>
                                                    </td>
                                                </tr>

                                                <tr class="ui-widget-header">
                                                    <td>Zona</td>
                                                    <td>Fecha Af EPS</td>
                                                    <td>Direcci&oacute;n</td>
                                                    <td>Tel&eacute;fono</td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <select id="zona" readonly ="true"  name="zona" class="ui-widget-content">
                                                            <option value="1">URBANA</option>
                                                            <option value="2">RURAL</option>
                                                        </select>
                                                    </td>                                
                                                    <td>
                                                        <input type="text" readonly ="true"  id="fecha_eps" name="fecha_eps" class="ui-widget-content"/>
                                                        <input type="hidden" id="id_entidad" name="id_entidad"/>
                                                    </td>
                                                    <td>
                                                        <input type="text" readonly ="true"  size="15" name="direccion" id="direccion" value="" class="ui-widget-content" />
                                                    </td>
                                                    <td>
                                                        <input type="text" readonly ="true"  size="15" name="telefono" id="telefono" value="" class="ui-widget-content" />
                                                    </td>

                                                </tr>                           
                                            </table>


                                        </div>




                                    </ul>



                                </div>
                                <div id="step-2">
                                    <h2 class="StepTitle">Step 2 Content</h2>	
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p> 
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>          
                                </div>                      
                                <div id="step-3">
                                    <h2 class="StepTitle">Step 3 Content</h2>	
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>               				          
                                </div>
                                <div id="step-4">
                                    <h2 class="StepTitle">Step 4 Content</h2>	
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>                			
                                </div>
                            </div>
                            <!-- End SmartWizard Content -->  		

                        </td></tr>
                </table>


                <!--FIN PRUEBA-->





                <center>
                    <button id="progPacienteBtn">Programar Paciente</button>
                </center>

                <div id="panelPlaneacion">
                    <h3 align="center">Historia Cl&aacute;nica</h3>
                    <div>
                        <div id="lista-planeacion"></div>
                    </div>
                </div>

                <!--
                                    </form>
                -->
            </div>

            <div class="qtip qtip-stylename">
                <div class="qtip-tip" rel="cornerValue"></div>
                <div class="qtip-wrapper">
                    <div class="qtip-borderTop"></div>
                    <div class="qtip-contentWrapper">
                        <div class="qtip-title">
                            <div class="qtip-button"></div>
                        </div>
                        <div class="qtip-content"></div>
                    </div>
                    <div class="qtip-borderBottom"></div>
                </div>
            </div>
        </body>
    </f:view>
</html>
